<template>
  <div v-show="Show" class="detail">
    <div class="detail-wrapper clearfix">
      <div class="detail-main">
          <slot></slot>
      </div>
    </div>
    <div class="detail-close">
      <el-button type="text" @click="handleClick"><i class="el-icon-close"></i></el-button>
    </div>
  </div>
</template>

<script>
  export default{
    props: {
      Show: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      handleClick(evt) {
        this.$emit('onClose', evt)
      }
    }
  }
</script>

<style scoped>
  /* clearfix */
  .clearfix{
    display: inline-block;
  }
  .clearfix:after{
    display: block;
    content: ".";
    height: 0;
    line-height: 0;
    clear:both;
    visibility: hidden;
  }
  /* sticky footer */
  .detail{
    position: fixed;
    top:0;
    left: 0;
    width:100%;
    height: 100%;
    overflow: auto;
    background: rgba(7,17,27,0.8);
    z-index:100;
  }
  .detail-wrapper{
    min-height: 100%;
  }
  .detail-main{
    color:antiquewhite;
    padding-left:50px;
    margin-top:64px;
    padding-bottom: 64px;
  }
  .detail-close{
    position: relative;
    left:50%;
    width:32px;
    height: 32px;
    margin: -64px auto 0 0;
    clear:both;
    font-size: 32px;
  }
</style>
